/**
   使用方法：可以传:imageHeight="imageWH"，:imageWidth="imageWH"来限制上传图片的宽高，最大上传为1M
   import cstUploadSingleimage from "@/components/UploadSingleimage/up_singleimage.vue";

   <el-form-item label="分类图片：" :label-width="formLabelWidth">
   <cst-upload-singleimage hint="只能上传一张，且不超过1M" :image="form.image" @change-imagefile="changeImagefile" @delete-imagefile="deleteImagefile"></cst-upload-singleimage>
   </el-form-item>

   <el-form-item label="平板图片：" :label-width="formLabelWidth" prop="appImage">
   <cst-upload-singleimage hint="只能上传一张，且规格为160×160" :image="form.appImage" :imageHeight="imageWH" :imageWidth="imageWH" @change-imagefile="changeAppImage" @delete-imagefile="deleteAppImage"></cst-upload-singleimage>
   </el-form-item>

   <el-form-item label="小程序图片：" :label-width="formLabelWidth"  prop="xcxImage">
   <cst-upload-singleimage hint="只能上传一张，且规格为160×160" :imageHeight="imageWH" :imageWidth="imageWH" :image="form.xcxImage" @change-imagefile="changeXcxImage" @delete-imagefile="deleteXcxImage"></cst-upload-singleimage>
   </el-form-item>

   changeImagefile({image:url,imageFile:file}) ;  deleteImagefile("")
  */

export default {
  inheritAttrs: false,
  data() {
    return {
      fileName: '',
      visible_viewimagedialog: false, // 看大图
      image: ''
    }
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    hint: {
      type: String,
      default: '只能上传一张，且大小不超3M'
    },
    fileSize: {
      type: Number,
      default: 3145728 // default:1048576  // 默认1M  3M = 3145728  b ,注意，调用时传数字  :fileSize="3145728" 冒号一定要加，不然会报错非Number类型
    },
    imageWidth: {// 默认图片大小
      type: [String, Number]
    },
    imageHeight: { // 默认图片大小
      type: [String, Number]
    },
    buttonName: {
      type: String,
      default: '选择图片' // 默认1M
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  created: function() {
    if (this.fileSize) {
      this._fileSize = this.fileSize// 默认1M
    }
    // if(this.imageWidth){
    //   this._imageWidth= this.imageWidth;// 默认图片大小
    // }
    // if(this.imageHeight){
    //   this._imageHeight= this.imageHeight;// 默认图片大小
    // }
    // if(this.hint){
    //   this._hint= this.hint;// 默认提示
    // }
  },
  methods: {
    selectionImg(event) {
      var that = this
      event = event || window.event
      var file = event.currentTarget.files[0]
      this.fileName = file.name
      var windowURL = window.URL || window.webkitURL
      var url = windowURL.createObjectURL(file)

      if (file.type.indexOf('image') !== -1) {
        if (file.size > that.fileSize) { // 1M
          that.$refs.fileEle.value = '' // 清除input，以便file change触发
          that.$alert('您这张"' + file.name + '"图片过大，' + this.hint + '请重新上传', { type: 'error' })
          return false
        } else { // 大小合格
          if (that.imageWidth && that.imageHeight) { // 处理是否有传宽高
            var create_image = new Image()
            create_image.src = url
            create_image.onload = function() {
              var cimg_width = this.width
              var cimg_height = this.height
              //  if(cimg_width != Number(that.imageWidth)){
              //     that.$alert( '您这张"' + file.name + '"图片宽度不等于'+ that.imageHeight +'，请重新上传',{type:'error'});
              //  }else if(cimg_height != Number(that.imageHeight)){
              //     that.$alert( '您这张"' + file.name + '"图片高度不等于'+ that.imageHeight +'，请重新上传',{type:'error'});
              //  }
              if (cimg_width !== Number(that.imageWidth) || cimg_height !== Number(that.imageHeight)) {
                that.$alert(`请上传${that.imageWidth}*${that.imageHeight}规格的图片`)
              } else { // 宽高合格
                sentEmit() // 发送数据给父级
              }
              create_image = null
              return false
            }
          } else {
            sentEmit() // 发送数据给父级
            return false
          }
        }
      } else {
        that.$alert('" ' + file.name + ' "不是图片类型，请选择一张图片！', { type: 'error' })
        return false
      }
      function sentEmit() {
        that.image = url
        that.$emit('change-imagefile', { image: url, imageFile: file, type: that.type })
        that.$refs.fileEle.value = ''
        // windowURL.revokeObjectURL(url); // 允许平台在合适的时机进行垃圾收集
      } // The upload image must be image type and size less than 1M
    },
    deleteimg() {
      this.$emit('delete-imagefile', '')
      this.image = ''
      this.$refs.fileEle.value = '' // 清除input，以便file change触发
    },
    /** 查看大图 */
    viewOriginalImage() {
      this.visible_viewimagedialog = true
    }
  }
}
